<template>
	<!-- 规格-模态层弹窗 -->
	<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
		<!-- 遮罩层 -->
		<view class="mask"></view>
		<view class="layer attr-content" @click.stop="stopPrevent">
			<u-icon name="close" size="28" class="close" @click="toggleSpec"></u-icon>
			<view class="a-t">
				<image :src="selectGoodsImg" mode="aspectFill"></image>
				<view  v-if="selectGoods.is_spec == 0" class="right">
					<view>
						<text class=" ff base-color" :class="exType == 'integral'?'integral':'price'">{{selectGoodsPrice}}</text>
						<text v-if="prom_id > 0" class="ml10 bg-base color-ff plr10 fs24">活动价</text>
						<text class="m-price ml20" v-if="selectGoods.show_market_price == 1">¥{{selectGoodSmarketPrice}}</text>
					</view>
					<view v-if="selectGoods.use_integral > 0" class="fs26">
						<text class="base-color font-w700">+{{selectGoods.use_integral}}积分</text>
						<text class="color-99">，需要消耗额外积分，才能购买</text>
					</view>
					<text class="stock" v-if="selectGoods.show_stock_num == 1">库存：{{selectGoodsNumber}}件</text>
					<view v-if="specSelected.length" class="selected">
						已选：
						<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
							{{sItem.name}}
						</text>
					</view>
				</view>
				<view v-else class="right">
					<view v-if="selectSkuId < 1">
						<text v-if="exType == 'integral'" class="integral ff base-color">{{selectGoods.show_integral}}</text>
						<text v-else class="price ff base-color">{{byType=='fgbuy'? selectGoods.show_price :selectGoods.min_price}}</text>
						<text class="font-w700 ml10 base-color">起</text>
						<text class="m-price ml20" v-if="selectGoods.show_market_price == 1">¥{{selectGoods.market_price}}</text>
					</view>
					<view v-else>
						<view>
							<text class="ff base-color" :class="exType == 'integral'?'integral':'price'">{{selectGoodsPrice}}</text>
							<text v-if="prom_id > 0" class="ml10 bg-base color-ff plr10 fs24">活动价</text>
							<text class="m-price ml20" v-if="selectGoods.show_market_price == 1">¥{{selectGoodSmarketPrice}}</text>
						</view>
						<text class="stock" v-if="selectGoods.show_stock_num == 1">库存：{{selectGoodsNumber}}件</text>
						<view v-if="specSelected.length" class="selected">
							已选：
							<text class="selected-text" v-for="(sItem, sIndex) in specSelected" :key="sIndex">
								{{sItem.name}}
							</text>
						</view>
					</view>
				</view>
			</view>
			<view v-for="(item,index) in specList" :key="index" class="attr-list base-select">
				<text>{{item.name}}</text>
				<view class="item-list">
					<text v-for="(childItem, childIndex) in specChildList" v-if="childItem.pid === item.id" :key="childIndex" class="tit"
					 :class="{selected: childItem.selected,display_none:specGetStyle(childItem,index,'display'),color_cc:specGetStyle(childItem,index,'color')}"  @click="selectSpec(childIndex, childItem.pid)">
						{{childItem.name}}
					</text>
				</view>
			</view>

			<view class="numbox mt20 flex">
				<view v-if="exType == 'integral'" class="flex_bd">兑换数量：</view>
				<view v-else class="flex_bd">购买数量：</view>
				<u-number-box v-model="buyNumber" :min="1" :step="1" :disabled="false"></u-number-box>
			</view>
			<view class="btn-box">
				<view v-if="selectGoods.is_spec == 1 && selectSkuId < 1">
					<button  class="btn bg-gray" >选择商品</button>
				</view>
				<view v-else-if="selectGoodsNumber > 0">
					<view v-if="byType == 'onbuycart'" class="smll">
						<button  class="btn primarybtn" style="width: 45%;" @click="buyBtn('oncart')" :loading="isLoading">加入购物车</button>
						<button  class="btn primarybtnB" style="width: 45%;" @click="buyBtn('onbuy')" :loading="isLoading">立即购买</button>
					</view>
					<view v-else>
						<button  class="btn primarybtn" @click="buyBtn()" :loading="isLoading">{{runBtnText()}}</button>
					</view>
				</view>
				<view v-else>
					<button class="btn bg-gray" >库存不足</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "goodsSpec",
		props: {
			byType: {
				type: String,
				default: 'oncart',
			},
			exType: {
				type: String,
				default: '',
			},
			specClass: {
				type: String,
				default: 'none',
			},
			selectGoodsPrice: {
				type: String,
				default: '0.00',
			},
			selectGoodSmarketPrice: {
				type: String,
				default: '0.00',
			},
			selectGoodsNumber: {
				type: Number,
				default: 0,
			},
			selectGoods: {
				type: Object,
				default: function() {
					return {};
				}
			},
			selectGoodsImg: {
				type: String,
				default: '',
			},
			specSelected: {
				type: Array,
				default: function() {
					return [];
				}
			},
			specList: {
				type: Array,
				default: function() {
					return [];
				}
			},
			specChildList: {
				type: Array,
				default: function() {
					return [];
				}
			},
			selectSkuId: {
				type: Number,
				default: 0,
			},
			fg_id: {
				type: Number,
				default: 0,
			},
			join_id: {
				type: Number,
				default: 0,
			},
			prom_type: {
				type: Number,
				default: 0,
			},
			prom_id: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				buyNumber: 1,
				selUnit: 0,
				isLoading: false,
			}
		},
		methods: {
			runBtnText(){
				if (this.byType == 'oncart'){
					return '加入购物车';
				}else if (this.byType == 'fgbuy'){
					if (this.join_id > 0){
						return '参与拼单';
					}else{
						return '发起拼单';
					}
				}else{
					if (this.exType == 'integral'){
						return '立即兑换';
					}else{
						return '立即购买';
					}
				}
			},
			specGetStyle(spec,index,type)
			{
				let specSelArr = [];
				let skuTotal = {};
				if (this.byType == 'fgbuy'){
					 skuTotal = this.selectGoods.fgSkuTotal;
				}else{
					 skuTotal = this.selectGoods.skuTotal;
				}
				if (this.specSelected.length < 1){
					if (type == 'display' && typeof(skuTotal[spec.id]) != 'undefined' && skuTotal[spec.id].show == 0){
						return true;
					}
					return false;
				}
				this.specSelected.forEach(function(item,key){
					if (key < index){
						specSelArr.push(item.id);
					}
				})
				specSelArr.push(spec.id);
				let selSpecKey = specSelArr.join('_');
				if (skuTotal[selSpecKey].show == 0 && type == 'display'){
					return true;
				}
				if (skuTotal[selSpecKey].goods_number < 1 && type == 'color'){
					return true;
				}
				return false;
			},
			//规格弹窗开关
			toggleSpec() {
				this.selUnit = 0;
				this.$emit("toggleSpec",this.byType);
			},
			//选择规格
			selectSpec(index, pid) {
				let list = this.specChildList;
				list.forEach(item => {
					if (item.pid === pid) {
						this.$set(item, 'selected', false);
					}
				})
				this.$set(list[index], 'selected', true);
				this.$emit("selectSpec", list);
			},
			selectUnit(unit) {
				this.selUnit = parseInt(unit);
			},
			buyBtn(byType = '') {
				if (this.isLoading == true) {
					return false;
				}
				if (byType == ''){
					 byType = this.byType;
				}
				this.isLoading = true;
				let url = 'shop/api.flow/addCart';
				let data = {};
				data.goods_id = this.selectGoods.goods_id;
				data.sku_id = this.selectSkuId;
				if (byType == 'fgbuy'){
					this.isLoading = false;
					let urlData = {};
					urlData.fg_id = this.fg_id;
					urlData.number = this.buyNumber;
					urlData.sku_id = data.sku_id;
					urlData.join_id = this.join_id;
					return this.app.goPage(['/pagesA/fightgroup/checkOut',urlData]);
				}
				let goUrl = '/pages/shop/flow/checkOut?recids=';
				data.number = this.buyNumber;
				data.type = byType;
				data.prom_type = this.prom_type;
				data.prom_id = this.prom_id;
				if(this.exType == 'integral'){
					url = 'integral/api.flow/addCart';
					data.prom_type = 2;
					data.prom_id = this.selectGoods.ig_id;
					goUrl = '/pages/integral/checkOut?recids=';
				}
				this.$u.post(url, data).then(res => {
					this.isLoading = false;
					if (byType == 'onbuy') {
						this.app.goPage( goUrl + res.data.rec_id);
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				}).catch(res => {
					this.isLoading = false;
				})
			},
			stopPrevent() {}
		}
	}
</script>

<style lang='scss'>
	/* 规格选择弹窗 */
	.attr-content {
		.a-t {
			display: flex;

			image {
				width: 160rpx;
				height: 160rpx;
				flex-shrink: 0;
				border-radius: 20rpx;

			}

			.right {
				display: flex;
				flex-direction: column;
				padding-left: 20rpx;
				font-size: 26rpx;
				color: $font-color-light;
				line-height: 55rpx;

				.price {
					font-size: 40rpx;
					margin-bottom: 10rpx;
					&:before {
						content: '￥';
						font-size: 24rpx;
					}
				}
				.integral {
					font-size: 40rpx;
					margin-bottom: 10rpx;
					&:after  {
						content: '积分';
						font-size: 24rpx;
					}
				}
				.m-price {
					color: $font-color-light;
					text-decoration: line-through;
				}

				.selected-text {
					margin-right: 10rpx;
				}
			}
		}

		.attr-list {
			display: flex;
			flex-direction: column;
			font-size: 32rpx;
			color: $font-color-dark;
			padding-top: 40rpx;
			padding-left: 20rpx;
		}

		.item-list {
			padding: 20rpx 0 0;
			display: flex;
			flex-wrap: wrap;

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #f4f4f4;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				border-radius: 32rpx;
				min-width: 110rpx;
				height: 66rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				color: $font-color-dark;
			}
			.color_cc{
				color: #cccccc;
			}
			.display_none{
				display: none;
			}
			.selected {
				color: #FFFFFF;
			}
		}
	}

</style>
